import './OptionsTemp.scss'

import { Select, TreeSelect, App } from 'antd'
import { LayoutDeftula } from '../Config/LayoutDeftula'
import { ColorCallBack, strOfurlParamsFunc, SpacingCallBack, getNestedValue } from '../Utils'
import { CaretDownOutlined } from '@ant-design/icons';
import { useState, useEffect } from 'react';
import { useRequest } from 'alova/client';
import { Http } from '../Utils/Api';

const TestData = [
    { value: '1', label: '分组1' },
    { value: '2', label: '分组2' },
    { value: '3', label: '分组3' },
]

const OptionsTempA02 = ({ config, apiData, TempEvent }) => {
    const { message } = App.useApp()
    const { send } = useRequest(data => Http(data), { immediate: false })
    const configuration = config || LayoutDeftula.Options02

    const { params, value, urlList, listType, dataParams, dataList,
        apiUrl, apiMethod, apiLevel, apiParams, apiHttp, apiKey, apiValue, apiChildren, addEmpty, addEmptyTitle,
        layout, align_items, justify_content, flex_direction, align_content, flex_wrap, width, height, borderRadius,
        backgroun, backgrounDeg, fill, fillDeg, fontSize, fontFamily, fontWeight, fontStyle, shadowX, shadowY, shadowS, shadowC,
        align, icon, iconColor, iconSize, additional, add_title, add_margin,
        add_fill, add_fillDeg, add_fontSize, add_fontFamily, add_fontWeight, add_fontStyle, add_shadowX, add_shadowY, add_shadowS, add_shadowC,
    } = configuration

    const [Data, setData] = useState([])
    const [Active, setActive] = useState(value)

    const boxStyle = {
        '--alignItems': align_items,
        '--justifyContent': justify_content,
        '--flexDirection': flex_direction,
        '--alignContent': align_content,
        '--flexWrap': flex_wrap,
    }

    const backStyle = {
        position: layout ? 'absolute' : 'relative',
        width: layout ? '100%' : width,
        height: layout ? '100%' : height,
        background: ColorCallBack(backgroun, backgrounDeg),
        borderRadius: borderRadius,
        '--align': align,
        '--background': ColorCallBack(fill, fillDeg),
        '--fontSize': fontSize + 'px',
        '--fontFamily': fontFamily,
        '--fontWeight': fontWeight,
        '--fontStyle': fontStyle,
        '--filter': `drop-shadow(${shadowX}px ${shadowY}px ${shadowS}px ${shadowC})`
    }

    const addStyle = {
        margin: SpacingCallBack(add_margin),
        '--background': ColorCallBack(add_fill, add_fillDeg),
        fontSize: add_fontSize,
        fontFamily: add_fontFamily,
        fontWeight: add_fontWeight,
        fontStyle: add_fontStyle,
        filter: `drop-shadow(${add_shadowX}px ${add_shadowY}px ${add_shadowS}px ${add_shadowC})`,
    }

    const onClick = (e) => {
        if (params) TempEvent.emit({ type: 'onOptionsSwitch', data: { params: { [params]: encodeURIComponent(e) }, urlList } })
        else message.info({ content: '未设置发送参数!', key: 'OptionsTempA02' })
        setActive(e)
    }

    useEffect(() => {
        if (listType) {
            if (listType === 'ApiMapping') {
                send({ method: apiMethod, url: apiUrl, path: apiHttp, params: strOfurlParamsFunc(apiParams) }).then(res => {
                    const data = getNestedValue(apiLevel, res)
                    const emptyData = addEmpty ? [{ [apiValue]: addEmptyTitle, [apiKey]: ' ' }] : []
                    setData([...emptyData, ...data])
                })
            } else {
                const data = dataList.map(item => ({ label: item.dataMapping, value: item.dataValue }))
                setData(data)
            }
        } else setData(TestData)
    }, [config])

    return (
        <div className='OptionsTempA02' style={boxStyle}>
            {additional && <div className='AddTitle' style={addStyle}>{add_title}</div>}
            <div className='BackBox' style={backStyle}>
                {apiChildren ?
                    <TreeSelect
                        value={Active}
                        fieldNames={{ label: apiValue, value: apiKey, children: apiChildren }}
                        suffixIcon={icon ? <CaretDownOutlined style={{ color: iconColor, fontSize: iconSize }} /> : false}
                        treeData={Data}
                        treeDefaultExpandAll
                        onChange={onClick}
                    /> :
                    <Select
                        value={Active}
                        options={Data}
                        fieldNames={{ label: apiValue, value: apiKey }}
                        suffixIcon={icon ? <CaretDownOutlined style={{ color: iconColor, fontSize: iconSize }} /> : false}
                        onChange={onClick}
                    />
                }
            </div>
        </div>
    )
}

export default OptionsTempA02;